<!-- 设备报修 -->
<template>
  <div class="bigBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>设备报修</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row> </el-row>
    <h2>报修记录</h2>

    <el-row :gutter="24">
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-button type="text" @click="handleAdd" icon="el-icon-plus"
            style="padding: 12px; background-color: #3f3f65; color: white">新增报修</el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <el-input v-model="searchForm.facilityName" placeholder="请输入名称"></el-input>
      </el-col>
      <el-col :span="8">
        <el-date-picker v-model="searchForm.repairsTime" type="daterange" range-separator="至" start-placeholder="维修开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="7">
        <el-date-picker v-model="searchForm.maintainTime" type="daterange" range-separator="至" start-placeholder="保修开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" class="chaXun" style="padding: 12px; background-color:#3f3f65 ;"
          @click="handSearch">查询</el-button>
      </el-col>
      <el-col :span="2">
        <el-dropdown style="padding-left: 10px;">
          <el-button @click="exportExcel">
            导出Excel<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item></el-dropdown-item>
            <el-dropdown-item>导出全部</el-dropdown-item><br />
            <el-dropdown-item>导出选中</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <div class="fromTable">
      <el-table :data="getRepairList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"
        id="selectTable">
        <el-table-column type="selection" width="55" fixed> </el-table-column>
        <el-table-column label="分类" prop="className" width="110" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="facilityName" width="110" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="编码" prop="facilityEncoding" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="单价（元）" prop="facilityPrice" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="报修数量" prop="repairsNum" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="规格" prop="facilitySpecification" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="保修时间" prop="repairsTime" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="修理状态" prop="maintainState" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="修理时间" prop="maintainTime" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="修理花销" prop="maintainExpend" show-overflow-tooltip width="110" header-align="center"
          align="center">
        </el-table-column>
        <el-table-column label="审批状态" show-overflow-tooltip header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 0" type="success">通过</el-tag>
            <el-tag v-else-if="scope.row.state == 2 || scope.row.state == 4" type="info">审核中</el-tag>
            <el-tag v-else-if="scope.row.state == 1" type="danger">拒绝</el-tag>
            <el-tag v-else="scope.row.state == 5" type="warning">已撤回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip header-align="center" align="center" width="220" fixed="right">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
              <el-button type="warning" circle class="el-icon-search" @click="Seedetails(scope.row)"
                size="mini"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑信息" placement="top">
              <el-button type="info" @click="handEdit(scope.row)" icon="el-icon-edit" circle size="mini"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="完成维修" placement="top">
              <el-button type="success" size="mini" :disabled="scope.row.maintainState == '完成维修' ? true : false"
                @click="CompleteRepair(scope.row)" icon="el-icon-check" circle></el-button>
            </el-tooltip>
            <el-button type="danger" v-if="scope.row.maintainState == '完成维修' ? false : true" size="mini"
              icon="el-icon-close" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="overflow: hidden;">
        <el-col :span="12"><el-button style="margin-top: 15px;" type="danger"
            @click="bulkDeletion">批量删除</el-button></el-col>
        <el-col :span="12" class="pag"><el-pagination background layout="prev, pager, next" :total="getRepairListCount"
            @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize">
          </el-pagination></el-col>
      </el-row>
    </div>
    <!-- 新增模态框 -->
    <el-dialog title="新增报修" :visible.sync="dialogFormVisible" width="60%">
      <div class="addLoseBox">
        <el-form :model="searchForm">
          <el-form-item label="查询区域：" :label-width="formLabelWidth">
            <el-input v-model="searchForm.facilityName" placeholder="请输入编码或名称" style="width: 150px"></el-input>
            <el-date-picker v-model="searchForm.repairsTime" type="daterange" range-separator="-"
              start-placeholder="入库起始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" class="chaXun" style="background-color: #3f3f65">查询</el-button>
          </el-form-item>
          <el-form-item label="信息显示：" :label-width="formLabelWidth">
            <el-table :data="getAddlist" tooltip-effect="dark" style="width: 100%" height="350"
              @selection-change="handleSelectionChangeAdd">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="className" label="分类" width="150">
              </el-table-column>
              <el-table-column prop="facilityName" label="名称" width="80">
              </el-table-column>
              <el-table-column prop="facilityEncoding" label="编码" width="80">
              </el-table-column>
              <el-table-column prop="facilityPrice" label="单价（元）" width="100">
              </el-table-column>
              <el-table-column prop="leaseNum" label="数量" width="80">
              </el-table-column>
              <el-table-column prop="facilitySpecification" label="规格" width="80">
              </el-table-column>
              <el-table-column prop="storageSite" label="存放地点" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="leaseTime" label="借出时间" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="报修数量" width="200" placeholder="选择日期" fixed="right" header-align="center"
                align="center">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.loseNum" @change="handleChange" :min="1" :max="scope.row.leaseNum"
                    label="描述文字"></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <div>
            <el-form-item label="故障原因：" :label-width="formLabelWidth">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="SeedetailsForm.scrapDesc">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddSure()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 查看详情模态框 -->
    <el-dialog title="报修详情" :visible.sync="dialogVisible" width="30%">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark" style="float:right">{{ SeedetailsForm.facilityEncoding }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark" style="text-align: center;">{{ SeedetailsForm.className }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark" style="float:left">{{ SeedetailsForm.facilityName }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>单价:</span> {{
            SeedetailsForm.facilityPrice }}</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>数量:</span> {{
            SeedetailsForm.repairsNum }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>规格:</span> {{
            SeedetailsForm.facilitySpecification }}</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>存放地点:</span> {{
            SeedetailsForm.state == 2 ? state = "库房1" : state = "库房2" }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>是否唯一 :</span> {{
            SeedetailsForm.facilityPrice }}</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>入库时间:</span> {{
            SeedetailsForm.facilityPrice }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>报修时间:</span> {{
            SeedetailsForm.repairsTime }}</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>故障原因:</span> {{
            SeedetailsForm.repairsDesc }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>维修时间:</span> {{
            SeedetailsForm.maintainTime }}</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px;"><span>维修金额:</span> {{
            SeedetailsForm.facilityPrice }}</div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改选项模态框 -->
    <el-dialog title="报修编辑" :visible.sync="centerDialogVisible" width="40%">
      <ul class="detailsLi">
        <li>
          <el-input autocomplete="off" placeholder="请输入编号" style="width: 120px; margin: 10px" center
            v-model="SeedetailsForm.facilityEncoding"></el-input>
          <el-select style="width: 120px; margin: 10px" v-model="SeedetailsForm.className" center>
            <span v-for="item in getFacilityClassList">
              <el-option :label="item.className" :value="item.id"></el-option>
            </span>

          </el-select>
          <el-input autocomplete="off" placeholder="请输入名称" style="width: 120px; margin: 10px" center
            v-model="SeedetailsForm.facilityName"></el-input>
        </li>
        <li>
          <span>单价:
            <el-input autocomplete="off" placeholder="请输入单价" style="width: 100px" center
              v-model="SeedetailsForm.facilityPrice"></el-input>
          </span>
          <span>数量:
            <el-input autocomplete="off" placeholder="报修数量" style="width: 100px" center
              v-model="SeedetailsForm.repairsNum"></el-input>
          </span>
        </li>
        <li>
          <span>规格:
            <el-input autocomplete="off" placeholder="规格" style="width: 100px" center
              v-model="SeedetailsForm.facilitySpecification"></el-input>
          </span>
          <span>存放地点:
            <el-select placeholder="请选择地点" style="width: 120px; margin: 10px" v-model="SeedetailsForm.storageSite">
              <span v-for="item in getStorageSiteList"> <el-option :label="item.storageSite"
                  :value="item.id"></el-option></span>
            </el-select>
          </span>
        </li>
        <li>
          <span>报修原因:
            <el-input style="width: 200px" type="textarea" :rows="2" placeholder="请输入内容"
              v-model="SeedetailsForm.repairsDesc">
            </el-input>
          </span>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 已完成模态框 -->
    <el-dialog title="完成维修" :visible.sync="CompleteMaintenance" width="40%">
      <ul class="detailsLi">
        <li>
          <el-input autocomplete="off" placeholder="请输入编号" style="width: 120px; margin: 10px" center
            v-model="SeedetailsForm.facilityEncoding"></el-input>
          <el-select style="width: 120px; margin: 10px" v-model="SeedetailsForm.className" center>
            <span v-for="item in getFacilityClassList">
              <el-option :label="item.className" :value="item.id"></el-option>
            </span>
          </el-select>
          <el-input autocomplete="off" placeholder="请输入名称" style="width: 120px; margin: 10px" center
            v-model="SeedetailsForm.facilityName"></el-input>
        </li>
        <li>
          <span>
            已完成维修！
          </span>
        </li>
        <li>
          <span>维修花费金额：
            <el-input autocomplete="off" placeholder="金额" style="width: 100px" center
              v-model="SeedetailsForm.maintainExpend"></el-input>
          </span>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="CompleteMaintenance = false">取 消</el-button>
        <el-button type="primary" @click="handleCompleteMaintenance">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import toExcel from "./../../utils/toExcel";
import { mapActions, mapGetters } from "vuex";
import ProcessTime from "./../../utils/timechuli";
export default {
  data() {
    return {
      test: "",
      tableData: [],
      formLabelWidth: "35",
      dialogFormVisible: false,//
      dialogVisible: false,
      centerDialogVisible: false,
      CompleteMaintenance: false,
      currentPage: 1, // 当前页
      pageSize: 10, // 每页条数
      searchForm: {
        facilityName: "",
        facilityEncoding: "",
        repairsTime: "",
        maintainTime: "",
        returnState: ''
      },
      SeedetailsForm: {
        className: "",
        facilityEncoding: 0,
        facilityName: "",
        facilityPrice: 0,
        facilitySpecification: "",
        id: 0,
        maintainExpend: 0,
        maintainState: "",
        maintainTime: "",
        repairsDesc: "",
        repairsNum: 0,
        repairsTime: "",
        state: 0,
        storageSite: ""
      },
      addList: [],
      selectData: [],
      editForm: {
      },
      bulkDeletionList: [],
      addArray: [],
      list: {
        page: 1,
        limit: 10
      }
    };
  },

  methods: {
    ...mapActions(["repairsPage", "facilityClass", "storageSite",
      "repairsUpdate", "leasePage", "repairsAdd",
      "repairsBathDelete", "updateRepairs"]),
    handleChange(value) {
      console.log(value);
      this.$forceUpdate();  //强制刷新
    },
    handleAdd() {
      this.searchForm.returnState = "hh"
      this.leasePage({
        page: this.currentPage,
        limit: this.pageSize,
        facilityName: this.searchForm.facilityName,
        repairsTime: this.searchForm.repairsTime,
        returnState: this.searchForm.returnState
      }).then(() => {
        this.dialogFormVisible = true
        console.log("getAddlist", this.getAddlist);
      })
    },
    handleAddSure(id) {
      console.log(id);
      if (id) {
        this.$message({
          message: '请选中需要添加的数据',
          type: "error",
          center: true
        })
      }
      let data = new Date(); // 获取当前时间
      console.log(data);
      let time = ProcessTime.msToDate(data)
      console.log(time);
      let list = []
      for (const key in this.addArray) {
        list.push({
          "facilityId": this.addArray[key].fid,
          "repairsNum": this.addArray[key].loseNum,
          "repairsDesc": this.SeedetailsForm.scrapDesc,
          "repairsTime": time
        })
      };
      this.repairsAdd(list).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
            center: true
          })
          this.dialogFormVisible = false
          this.repairsPage({
            page: this.currentPage, limit: this.pageSize, facilityName: this.searchForm.facilityName,
            facilityEncoding: this.searchForm.facilityEncoding, repairsTime: this.searchForm.repairsTime, maintainTime: this.searchForm.maintainTime
          })
          this.$refs["SeedetailsForm"].resetFields();
        }
      })
    },
    CompleteRepair(data) { // 完成维修按钮
      console.log(data);
      this.SeedetailsForm = data
      this.CompleteMaintenance = true
    },
    bulkDeletion() { // 删除按钮
      if (this.bulkDeletionList.length < 1) {
        this.$message({
          message: "请选择需要删除的数据",
          type: "error",
          center: true
        })
        return false
      }
      console.log(this.bulkDeletionList);
      this.repairsBathDelete(this.bulkDeletionList).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            center: true
          })
          this.repairsPage(this.list)
        }
      })
    },
    exportExcel() { // 导出 数据
      if (this.selectData.length < 1) {
        this.$message({
          message: "请选择需要导出的内容",
          type: "error",
          center: true
        })
        return false
      }
      toExcel.getExcel("#selectTable", "设备报修数据")
    },
    handleSelectionChange(value) { //选中的内容w
      console.log(value);
      this.selectData = value
      let arr = []
      for (const key in value) {
        console.log(key);
        arr.push(value[key].frid)
      }
      this.bulkDeletionList = arr
      console.log("bulkDeletionList", this.bulkDeletionList);
    },
    handleSelectionChangeAdd(value) { //模态添加选中的内容
      console.log("val", value);
      this.addArray = value

      // console.log(this.SeedetailsForm);
    },
    handEdit(data) {// 修改
      this.storageSite().then(() => {
        this.SeedetailsForm = data
        if (data.id == this.SeedetailsForm.id) {
          console.log("innner");
          this.centerDialogVisible = true
        }
      })
      console.log(data);

      console.log(this.SeedetailsForm);
    },
    Seedetails(data) {// 查看详情
      console.log(data);
      this.SeedetailsForm = data
      this.dialogVisible = true
    },
    handleCurrentChange(currentPage) {//获取页码
      this.currentPage = currentPage;
      this.repairsPage({
        page: this.currentPage, limit: this.pageSize, facilityName: this.searchForm.facilityName,
        facilityEncoding: this.searchForm.facilityEncoding, repairsTime: this.searchForm.repairsTime, maintainTime: this.searchForm.maintainTime
      })
      console.log('当前页码：', currentPage);
    },
    handSearch() {
      console.log(Boolean(this.searchForm.maintainTime));
      let time = ""
      let time2 = ""
      let endTime = ""
      let endTime2 = ""
      if (this.searchForm.repairsTime) {
        time = ProcessTime.msToDate(this.searchForm.repairsTime[0])
        endTime = ProcessTime.msToDate(this.searchForm.repairsTime[1])
      }
      if (this.searchForm.maintainTime) {
        time2 = ProcessTime.msToDate(this.searchForm.maintainTime[0])
        endTime2 = ProcessTime.msToDate(this.searchForm.maintainTime[1])
      }
      let list1 = {
        maintainStartTime: time2,
        maintainEndTime: endTime2,
        page: this.currentPage,
        limit: this.pageSize,
        facilityName: this.searchForm.facilityName,
        facilityEncoding: this.searchForm.facilityEncoding,
        repairsStartTime: time,
        repairsEndTime: endTime
      }
      this.repairsPage(list1)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    handleCompleteMaintenance() { // 确认维修完成
      console.log("frid", this.SeedetailsForm.maintainExpend);
      this.repairsUpdate({ id: this.SeedetailsForm.frid, maintainExpend: this.SeedetailsForm.maintainExpend }).then(res => {
        if (res.code == 200) {
          this.CompleteMaintenance = false
          this.$message({
            message: "完成维修",
            type: "success",
            center: true
          })
          //重新渲染页面
          this.repairsPage({
            page: this.currentPage, limit: this.pageSize, facilityName: this.searchForm.facilityName,
            facilityEncoding: this.searchForm.facilityEncoding, repairsTime: this.searchForm.repairsTime, maintainTime: this.searchForm.maintainTime
          })
        }
      })
    },
    handleEdit() {//提交修改确认按钮
      updateRepairs(this.SeedetailsForm).then(res => {
        if (res.data == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
            center: true
          })
          this.repairsPage({
            page: this.currentPage, limit: this.pageSize, facilityName: this.searchForm.facilityName,
            facilityEncoding: this.searchForm.facilityEncoding, repairsTime: this.searchForm.repairsTime, maintainTime: this.searchForm.maintainTime
          })
          this.CompleteMaintenance = false
        }
      })
    }
  },
  created() {
    this.repairsPage(this.list)
    this.facilityClass()
  },
  computed: {
    ...mapGetters(["getRepairListCount", "getRepairList", "getFacilityClassList", "getStorageSiteList", "getAddlist"])
  }

};
</script> 
<style>
* {
  margin: 0;
  padding: 0;
}

.bigBox {
  /* margin: 29px; */
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
}

h2 {
  padding: 10px 0;
}

.fromTable {
  padding: 10px 0;
  overflow: hidden;
}

.tu1 {
  width: 100px;
  height: 50px;
}

.shouSuo {
  width: 300px;
  height: 50px;
}

.tu2 {
  width: 50px;
  height: 50px;
}

.el-row {
  /* margin-bottom: 20px; */
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}

.el-icon-upload2 {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}

.el-icon-download {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}

.pag {
  float: right;
  margin: 20px auto;
}

/* 查看详情模态框 */
.detailsLi {
  list-style-type: none;
}

.detailsLi li {
  margin: 10px;
}

.detailsLi li span {
  margin: 30px;
}



.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  float: right;
}
</style>
  